import 'dart:math';

import 'package:flutter/material.dart';
import 'package:imitating_tiktok/pages/home_pages/models/video_model.dart';

class HomeRightBar extends StatefulWidget {
  final Video video;
  const HomeRightBar({Key? key, required this.video}) : super(key: key);

  @override
  _HomeRightBarState createState() => _HomeRightBarState();
}

class _HomeRightBarState extends State<HomeRightBar>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController;

  @override
  void initState() {
    _animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 5))
          // ..repeat()
          ..forward()
          ..repeat();
    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        _layoutUserImageButton(),
        _layoutBarItem(
          "assets/images/tiktok_collection@2x.png",
          widget.video.collectionNumber,
          TextStyle(color: Colors.white, fontSize: 12.0),
        ),
        _layoutBarItem(
          "assets/images/tiktok_message@2x.png",
          widget.video.commentNumber,
          TextStyle(color: Colors.white, fontSize: 12.0),
        ),
        _layoutBarItem(
          "assets/images/tiktok_shared@2x.png",
          widget.video.sharedNumber,
          TextStyle(color: Colors.white, fontSize: 12.0),
        ),
        _layoutDiscItem(),
      ],
    );
  }

  // 布局唱片
  Widget _layoutDiscItem() {
    return AnimatedBuilder(
      animation: _animationController,
      child: Container(
        width: 46,
        height: 46,
        decoration: BoxDecoration(
          gradient: SweepGradient(
            colors: [
              Colors.white24,
              Colors.black38,
              Colors.white24,
              Colors.black38,
              Colors.white24,
            ],
          ),
          borderRadius: BorderRadius.circular(23),
        ),
        child: Center(
          child: Container(
            width: 30,
            height: 30,
            decoration: BoxDecoration(
              color: Colors.orangeAccent,
              borderRadius: BorderRadius.circular(15),
              image: DecorationImage(
                image: NetworkImage(widget.video.user.userAvatar),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
      builder: (context, child) {
        return Transform.rotate(
          angle: 2 * pi * _animationController.value,
          child: child,
        );
      },
    );
  }

  // 布局收藏、评论、分享
  Widget _layoutBarItem(String imageName, String label, TextStyle style) {
    return Column(
      children: [
        Image.asset(imageName),
        SizedBox(height: 5.0),
        Text(
          label,
          style: style,
        ),
      ],
    );
  }

  // 布局头像
  Widget _layoutUserImageButton() {
    return Stack(
      clipBehavior: Clip.none,
      alignment: Alignment.bottomCenter,
      children: [
        Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            // color: Colors.orangeAccent,
            border: Border.all(width: 2.0, color: Colors.white),
            borderRadius: BorderRadius.circular(25),
            image: DecorationImage(
              image: NetworkImage(widget.video.user.userAvatar),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Positioned(
          bottom: -10,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Icon(
              Icons.add,
              size: 20,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }
}
